import React from 'react';
import { Button, Tabs, Tooltip, Popconfirm, message } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import Action from "@c/buttonAction/Index";
// table 组件
import TableComponent from "@c/tableData/Index";
// modal 组件
import GroupDetailModal from "./components/GroupDetailsModal";
// form 组件
import FormCom from "@c/form/Index";
// http
import http from '../../utils/request';

const { TabPane } = Tabs;

class PublicDomainDetail extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      visible: false,
      confirmLoading: false,
      // 表头
      tableConfig: {
          url: "/group/" + this.props.location.state.group_id,
          method: "get",
          rowkey: "service_id",
          checkbox: true,
          nstable: true,
          thead: [
              { title: "service_code", dataIndex: "service_code", key: "service_code" },
              { title: "service_name", dataIndex: "service_name", key: "service_name" },
          ],
          thead_item: [
            { title: "IP", dataIndex: "ip", key: "ip" },
            { title: "实例id", dataIndex: "instance_id", key: "instance_id" },
            { title: "实例名称", dataIndex: "instance_name", key: "instance_name" },
            { title: "EIP", dataIndex: "eips", key: "eips" },
            { 
              title: "管理", 
              dataIndex: "manage", 
              key: "manage", 
              width: 215,
              render: (text, rowData) => {
                console.log(rowData)
                  return (
                      <div className="inline-button">
                          <Action>
                            <Popconfirm 
                              // id={}
                              title="是否确认删除该数据？" 
                              // visible={this.state.visible}
                              onConfirm={() => this.handleDelete(rowData.avatar_id)}
                              okButtonProps={{ loading: this.state.confirmLoading }}
                              // onCancel={this.handleCancel}
                            >
                                <Action.Button >删除</Action.Button>
                            </Popconfirm>
                          </Action>
                      </div>
                  )
              }
          }
          ],
          // search
          // formItem: []
      },
      // 表的数据
      data: []
    };
  }

  componentDidMount(){
    console.log(this.props.location)
  }

  // // 弹出气泡
  // showPopconfirm = () => {
  //   console.log('showPopconfirm===>', this.state)
  //   this.setState({ visible: true })
  // }
  // // 取消气泡
  // handleCancel = () => {
  //   console.log('Clicked cancel button');
  //   this.setState({ visible: false })
  // }
  
  // 气泡 提交表单删除
  handleDelete = (avatar_id) => {
    this.setState({ confirmLoading: true });
    // api loading
    http.delete(`/avatar/${avatar_id}`).then(response => {
      console.log(response)
      message.info(response.data.msg)
      this.setState({
        visible: false,
        confirmLoading: false
      })
      this.tableComponent.loadData();
    })
  };

  // 获取子组件实例
  getChildRef = (ref) => {
    this.tableComponent = ref; // 存储子组件
  }
  // 获取子弹窗实例
  getGroupDetailModalRef = (ref) => { this.child = ref }
  // 显示弹窗
  group_detailModal = (data) => {
    this.child.visibleModal(data);
  }

  render(){
    const { tableConfig } = this.state;

    return (
      <div>
        <Tooltip title="返回">
          <Button 
              icon={<ArrowLeftOutlined />} 
              onClick={() => window.history.back()}
              size='large'
              style={{ border: 'none' }}
          >    
          </Button>
        </Tooltip>
        <Tabs defaultActiveKey="1" >
            <TabPane tab='详情页' key='1' >
              <Button type='primary' ref="groupBind" onClick={() => this.group_detailModal({ status: true, group_id: this.props.location.state.group_id })}>添加机器</Button>
              <TableComponent onRef={this.getChildRef} batchButton={true} config={tableConfig} ></TableComponent>
            </TabPane>
            <TabPane tab='详情页2' key='2' >
                <div>群组信息。</div>
                <FormCom onRef={this.onFormRef} 
                  onBlur={this.onBlurEvent} formItem={this.state.formItem} 
                  formLayout={this.state.formLayout} formConfig={this.state.formConfig} 
                  submit={this.submit}>
                </FormCom>
            </TabPane>
        </Tabs>
        <GroupDetailModal onRef={this.getGroupDetailModalRef} />
      </div>
    )
  }
}

export default PublicDomainDetail;